<template>
    <div class="details_class">
        <!-- {{ list }} -->
        <van-steps direction="vertical" :active="list.length">
            <van-step v-for="(item, index) in list" :class="`item_${status.findIndex((ite) => ite == item.deleteReason)}`"
                :key="index">
                <h3>
                    {{ item.createTime }}&nbsp;&nbsp;{{
                        item.deleteReason || "待审批"
                    }}&nbsp;&nbsp;<span v-if="item.duration">耗时:{{ millsToTime(item.duration) }}</span>
                </h3>
                <p class="comment_assign_class">
                    {{ item.name }}:<span v-for="(ite, ind) in item.assignees" :key="ind">{{ ite.username }}{{
                        ite.isExecutor ? "" : "(未签)" }}</span>
                </p>
                <p class="comment_class" v-for="(ite, ind) in commentComputed(item.comment)" :key="ind">
                    <span v-for="(zite, zind) in ite" :key="zind">{{ zite }}</span>
                </p>
            </van-step>
        </van-steps>
    </div>
</template>

<script>
import { Notify, timeline } from "vant";
import { getAction } from "@/api/manage";
export default {
    data () {
        return {
            status: ["", "审批通过", "审批驳回"],
            url: {
                list: "/actTask/historicFlow/",
            },
            list: [],
        };
    },
    computed: {
        millsToTime () {
            return (mills) => {
                if (!mills) {
                    return "";
                }
                let s = mills / 1000;
                if (s < 60) {
                    return s.toFixed(0) + " 秒";
                }
                let m = s / 60;
                if (m < 60) {
                    return m.toFixed(0) + " 分钟";
                }
                let h = m / 60;
                if (h < 24) {
                    return h.toFixed(0) + " 小时";
                }
                let d = h / 24;
                if (d < 30) {
                    return d.toFixed(0) + " 天";
                }
                let month = d / 30;
                if (month < 12) {
                    return month.toFixed(0) + " 个月";
                }
                let year = month / 12;
                return year.toFixed(0) + " 年";
            };
        },
        commentComputed () {
            return (val) => {
                if (val) {
                    let commentstr = [];
                    let commentArr = [];
                    if (val.indexOf("#{这是分割符}") != -1) {
                        commentstr = val.split("#{这是分割符}");
                        commentArr = [];
                        commentstr.map((items) => {
                            let arr = items.split("#{审批}");
                            commentArr.push(arr);
                        });
                        console.log(commentArr);
                        return commentArr;
                        // console.log(commentArr);
                        // console.log(commentstr);
                    }
                    return [[val]];
                }
            };
        },
    },
    methods: {
        getLayoutsList () {
            getAction(this.url.list + this.$route.query.id).then((res) => {
                if (res) {
                    if (res.success) {
                        this.list = res.result;
                    } else {
                        Notify({ type: "warning", message: res.message });
                    }
                    console.log(res, "res");
                }
            });
        },
    },
    created () {
        this.getLayoutsList();
    },
};
</script>

<style lang="scss" scoped>
.details_class {
    padding-top: 20px;

    .van-steps__items {
        .item_0 {
            ::v-deep {
                .van-step__circle {
                    background: #ccc;
                }
            }
        }

        .item_1 {
            ::v-deep {
                .van-step__circle {
                    background: #07c160;
                }
            }
        }

        .item_2 {
            ::v-deep {
                .van-step__circle {
                    background: #f3b066;
                }
            }
        }
    }

    h3 {
        font-size: 14px;
    }

    ::v-deep {
        .van-step__circle {
            width: 8px;
            height: 8px;
        }

        .van-step__line {
            left: -15.5px;
        }
    }

    .van-step__title {
        h3 {
            margin-top: 0;
        }
    }

    .comment_assign_class {
        margin: 5px 0;

        span {
            margin-left: 10px;
        }
    }

    .comment_class {
        margin: 10px 0;

        span {
            margin: 15px;
            margin-left: 0;
            margin-bottom: 0;
        }
    }
}
</style>
